<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>仿京东放大镜</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.w {
				width: 1200px;
				margin: 0 auto;
			}
			.box {
				height: 800px;
				/*border: 1px solid #ccc;*/
			}
			.priview_img {
				position: relative;
				width: 400px;
				height: 400px;
				margin: 50px 20px 0;
				border: 1px solid #ccc;
				cursor: move;
			}
			.pre_img {
				width: 100%;
				height: 100%;
			}
			.mask {
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 300px;
				height: 300px;
				background-color: #fede4f;
				opacity: .5;
			}
			.preview {
				display: none;
				position: absolute;
				top: 0;
				left: 410px;
				width: 500px;
				height: 500px;
				border: 1px solid #ccc;
				overflow: hidden;
			}
			
			.preview img {
				position: absolute;
			}
			
		</style>
	</head>
	<body>
		<div class="box w">
			<div class="priview_img">
				<img src="img/b3.png" class="pre_img"/>
				<div class="mask"></div>
				<div class="preview">
					<img src="img/big.jpg"/>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			window.addEventListener('load',function() {
				//获取对象
				var imgbox = document.querySelector('.priview_img');
				var mask = document.querySelector('.mask');
				var pre = document.querySelector('.preview');
				
				//当鼠标经过图片盒子的时候,显示遮罩层和图片预览的盒子
				imgbox.addEventListener('mouseover',function() {
					mask.style.display = 'block';
					pre.style.display = 'block';
				})
				//当鼠标离开图片盒子的时候，隐藏遮罩层和图片预览的盒子
				imgbox.addEventListener('mouseout',function() {
					mask.style.display = 'none';
					pre.style.display = 'none';
				})
				//当鼠标者盒子里面移动的时候,获取鼠标者盒子内的坐标
				imgbox.addEventListener('mousemove',function(e) {
					//x轴坐标等于 鼠标在网页中的x轴坐标减去  图片盒子 的偏移量
					var x = e.pageX - imgbox.offsetLeft;
					var y = e.pageY - imgbox.offsetTop;
					
					//将鼠标在盒子内的坐标赋给遮罩层,让遮罩层跟随鼠标移动
					//将遮罩层向上，向左移动自身的一半
					maskX = x - mask.offsetWidth / 2;
					maskY = y - mask.offsetHeight / 2;
					
					// 判断遮罩层是否跑出边界
					if(maskX <= 0) {
						maskX = 0;
					} else if(maskX >= imgbox.offsetWidth - mask.offsetWidth) {
						//如果遮罩层的定位大于100px，限制盒子的定位等于 100px
						maskX = imgbox.offsetWidth - mask.offsetWidth;
					}
					if(maskY <= 0) {
						maskY = 0;
					}else if(maskY >= imgbox.offsetHeight - mask.offsetHeight) {
						maskY = imgbox.offsetHeight - mask.offsetHeight;
					}
					mask.style.left = maskX + 'px';
					mask.style.top = maskY + 'px';
					
					//根据遮罩层相对于图片盒子的移动距离来确定 右边预览图片 相对于 右边图片盒子的移动距离
					//遮罩层的移动距离maskX / 遮罩层的最大移动距离maskMax = 预览图片的移动距离preX / 大图片的移动距离 preMax
					//preX = maskX * preMax / maskMax
					//preMax = 预览图片的宽度 - 预览图片盒子的宽度(因为图片的宽度比盒子的宽度大)
					var bigimg = document.querySelector('.preview img');
					var preMaxW = bigimg.offsetWidth - pre.offsetWidth;
					var preMaxH = bigimg.offsetHeight - pre.offsetHeight;
					
					//遮罩层最大移动距离
					var maskMaxW = imgbox.offsetWidth - mask.offsetWidth;
					var maskMaxH = imgbox.offsetHeight - mask.offsetHeight;
					
					var preX = maskX * preMaxW / maskMaxW;
					var preY = maskY * preMaxH /maskMaxH;
					
					//因为移动方向相反,所以要加 '-' 号
					bigimg.style.left = '-'+ preX + 'px'
					bigimg.style.top = '-' + preY + 'px'
					
					
				})
			})
		</script>
	</body>
</html>
